<template>
  <el-row>
    <!-- 公司名称 -->
    <el-col :span="18">
      <span>{{ item.name }}</span>
    </el-col>
    <!-- 负责人 + 操作 -->
    <el-col :span="6">
      <el-row>
        <el-col :span="12">{{ item.manager }}</el-col>
        <el-col :span="12">
          <!-- 下拉菜单 -->
          <el-dropdown @command="handleClick">
            <span>操作<i class="el-icon-arrow-down" /> </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="add">添加子部门</el-dropdown-item>
              <template v-if="item.id">
                <el-dropdown-item command="edit">编辑部门</el-dropdown-item>
                <el-dropdown-item command="del">删除部门</el-dropdown-item>
              </template>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
import { delDeptAPI } from "@/api/departments";
export default {
  name: "TreeItem",
  props: {
    // 父传子部门对象
    item: {
      type: Object,
      required: true,
    },
  },
  methods: {
    async handleClick(command) {
      switch (command) {
        case "add": // 新增子部门
          // 通知父让其显示添加面板，并且携带部门对象
          this.$emit("on-add-click", this.item);
          break;
        case "edit": // 编辑部门
          // 通知父让其显示编辑面板，并且携带部门对象
          this.$emit("on-edit-click", this.item);
          break;
        case "del": // 删除部门
          try {
            // 1. 询问
            await this.$confirm("此操作不可逆、确定删除么?", "温馨提示", {
              type: "warning",
            });
            // 3. 确定
            // 3.1. 调接口
            await delDeptAPI(this.item.id);
            // 3.2. 给个提示
            this.$message.success("删除部门成功");
            // 3.3. 重新拉取一次数据
            this.$emit("on-del-success");
          } catch (e) {
            console.dir(e);
            // 2. 取消 -> 给个提示
            this.$message.info("已取消");
          }
          break;
      }
    },
  },
};
</script>

<style></style>
